CSS @function: Maxsus Funksiya Ta'riflarining Kuchini Ishga Solish

Cascading Style Sheets (CSS) oddiy uslub berishdan ancha rivojlandi. Zamonaviy CSS ishlab chiquvchilarga dinamik, qo'llab-quvvatlanadigan va kengaytiriladigan dizaynlarni yaratish uchun kuchli vositalarni taqdim etadi. Shunday vositalardan biri @function qoidasi bo'lib, u sizga CSS ichida maxsus funksiyalarni aniqlash imkonini beradi, bu esa qayta ishlatiladigan mantiq va murakkab hisob-kitoblarni to'g'ridan-to'g'ri uslublar jadvalingizda amalga oshirishga yordam beradi.

CSS @function nima?

CSS'dagi @function qoidasi JavaScript, Python yoki PHP kabi dasturlash tillaridagi funksiyalarga o'xshaydi. U ma'lum bir vazifani bajaradigan va qiymat qaytaradigan kod blokini aniqlash imkonini beradi. Keyin bu qiymatni CSS xususiyatlarida ishlatish mumkin, bu esa uslublar jadvallaringizni yanada dinamik va moslashuvchan qiladi. Faqat statik qiymatlarga yoki o'rnatilgan calc() funksiyasiga tayanmasdan, o'zingizning maxsus dizayn ehtiyojlaringizga moslashtirilgan hisob-kitoblar va o'zgartirishlarni yaratishingiz mumkin.

Sass va Less kabi preprotsessorlarda tez-tez ishlatiladigan CSS miksinlaridan farqli o'laroq, ular asosan kod bloklarini nusxalaydi va joylashtiradi, @function esa haqiqatda qiymat qaytaradi. Bu ularni kirish parametrlariga asoslangan hisob-kitoblar va o'zgartirishlarni bajarish uchun ideal qiladi.

Nima uchun CSS @function dan foydalanish kerak?

@function ni CSS ish jarayoningizga kiritish uchun bir nechta jiddiy sabablar mavjud:

• Qayta foydalanish imkoniyati: Funksiyani bir marta aniqlang va uni uslublar jadvalingiz bo'ylab qayta ishlating, bu kod takrorlanishini kamaytiradi va qo'llab-quvvatlashni yaxshilaydi. Bu ayniqsa katta loyihalarda foydalidir.
• Dinamik uslublar: CSS o'zgaruvchilari yoki boshqa dinamik kiritmalarga asoslangan hisob-kitoblar va o'zgartirishlarni bajaring, bu esa moslashuvchan va adaptiv dizaynlarni yaratishga yordam beradi. Bu faqat media so'rovlariga qaraganda ancha nozik nazoratni ta'minlaydi.
• Mavzulashtirish: Markaziy mavzuga asoslangan ranglar palitrasi, oraliq masofalar shkalasi va boshqa dizayn elementlarini yaratish uchun funksiyalar yarating. Bu mavzulashtirishni soddalashtiradi va oson moslashtirish imkonini beradi.
• Murakkab hisob-kitoblar: Standart CSS vositalari bilan qiyin yoki imkonsiz bo'lgan murakkab matematik amallar yoki satrlar bilan ishlashni bajaring. Tomonlar nisbatini hisoblash yoki maxsus mantiq yordamida murakkab gradientlar yaratishni tasavvur qiling.
• Qo'llab-quvvatlash qulayligi: Murakkab mantiqni funksiyalarda markazlashtiring, bu esa CSS'ni tushunish, tuzatish va o'zgartirishni osonlashtiradi. O'zgarish kerak bo'lganda, bir xil hisob-kitobning bir nechta nusxasini emas, balki faqat funksiya ta'rifini yangilashingiz kerak bo'ladi.

Brauzerlarda qo'llab-quvvatlanishi

@function qoidasi zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi. So'nggi yangilanishlarga ko'ra, barcha asosiy brauzerlar (Chrome, Firefox, Safari, Edge) @function qoidasini to'liq qo'llab-quvvatlaydi. Biroq, har doim caniuse.com saytini tekshirib, eng so'nggi brauzer mosligi ma'lumotlarini tasdiqlang, ayniqsa eski brauzer versiyalarini nishonga olayotganda.

CSS @function sintaksisi

@function qoidasining asosiy sintaksisi quyidagicha:

            @function funksiya-nomi(parametr1, parametr2, ...) {
  // Funksiya tanasi (CSS kod)
  @return qiymat;
}

            

              
                Copy
              
            
          

Keling, sintaksisni tahlil qilamiz:

• @function: Funksiya ta'rifining boshlanishini bildiruvchi kalit so'z.
• funksiya-nomi: Funksiyaning nomi. Funksiya maqsadini aks ettiruvchi tavsiflovchi nom tanlang. CSS nomlash qoidalariga rioya qiling (kichik harflar, chiziqcha bilan ajratilgan).
• (parametr1, parametr2, ...): Funksiya qabul qiladigan parametrlar ro'yxati. Parametrlar ixtiyoriy; funksiya nol yoki undan ortiq parametrga ega bo'lishi mumkin.
• { ... }: Funksiya tanasi, u funksiya chaqirilganda bajariladigan CSS kodini o'z ichiga oladi.
• @return qiymat;: @return bayonoti funksiya qaytaradigan qiymatni belgilaydi. Bu majburiy; har bir funksiya qiymat qaytarishi *kerak*. Qiymat har qanday yaroqli CSS qiymati bo'lishi mumkin, masalan, son, satr, rang yoki uzunlik.

CSS @function ning amaliy misollari

@function kuchini ko'rsatish uchun, keling, ba'zi amaliy misollarni ko'rib chiqamiz:

1. Piksellarni REM larga o'tkazish

Veb-ishlab chiqishda keng tarqalgan vazifalardan biri pikselli qiymatlarni yaxshiroq foydalanish imkoniyati va moslashuvchanlik uchun REM larga (root em) o'tkazishdir. Mana bu konvertatsiyani avtomatlashtirish uchun funksiya:

            @function rem($pixel-value) {
  $rem-value: $pixel-value / 16;
  @return #{$rem-value}rem;
}

body {
  font-size: 16px; // Asosiy shrift o'lchami
}

h1 {
  font-size: rem(32); // 32px ga teng
}

p {
  font-size: rem(16); // 16px ga teng
}

            

              
                Copy
              
            
          

Bu misolda:

• rem() funksiyasi kirish sifatida piksel qiymatini ($pixel-value) oladi.
• U piksel qiymatini 16 ga (standart brauzer shrift o'lchami) bo'lib, ekvivalent REM qiymatini hisoblaydi.
• U hisoblangan REM qiymatini rem birligi bilan birga qaytaradi.

Bu funksiyani uslublar jadvalingiz bo'ylab piksel qiymatlarini REM larga osonlikcha o'tkazish uchun ishlatish mumkin, bu esa izchil va kengaytiriladigan tipografiyani ta'minlaydi.

2. Ranglar palitrasini yaratish

Yaxshi dizayn uchun izchil ranglar palitrasini yaratish muhimdir. Mana asosiy rangning foiz qiymatiga asoslangan tusini yaratish uchun funksiya:

            @function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

$primary-color: #007bff; // Asosiy rang misoli (ko'k)

.button {
  background-color: $primary-color;
  border-color: shade($primary-color, 20%); // Asosiy rangdan 20% to'qroq tus
  color: white;
}

            

              
                Copy
              
            
          

Bu misolda:

• shade() funksiyasi kirish sifatida rang ($color) va foizni ($percentage) oladi.
• U mix() funksiyasidan (ba'zi CSS preprotsessorlarida mavjud) foydalanib, asosiy rangni qora rang bilan aralashtiradi va to'qroq tus yaratadi. Agar standart CSS dan foydalanayotgan bo'lsangiz, JavaScript polifilini yoki alternativ ranglarni o'zgartirish funksiyasini ko'rib chiqing.
• U yaratilgan tus rangini qaytaradi.

Bu funksiya sizga ranglar palitrangiz uchun turli tuslarni osonlikcha yaratishga imkon beradi, bu esa dizayningiz bo'ylab vizual izchillikni ta'minlaydi.

3. Tomonlar nisbatini hisoblash

Moslashuvchan tasvirlar va videolar uchun tomonlar nisbatini saqlash juda muhimdir. Mana elementning kengligi va tomonlar nisbatiga asoslanib uning balandligini hisoblash uchun funksiya:

            @function aspect-ratio-height($width, $ratio-width, $ratio-height) {
  @return $width * ($ratio-height / $ratio-width);
}

.responsive-image {
  width: 100%;
  height: aspect-ratio-height(100%, 16, 9); // 16:9 tomonlar nisbati
}

            

              
                Copy
              
            
          

Bu misolda:

• aspect-ratio-height() funksiyasi kirish sifatida kenglikni ($width), tomonlar nisbati kengligini ($ratio-width) va tomonlar nisbati balandligini ($ratio-height) oladi.
• U balandlikni quyidagi formula bo'yicha hisoblaydi: kenglik * (nisbat balandligi / nisbat kengligi).
• U hisoblangan balandlik qiymatini qaytaradi.

Bu funksiya elementning kengligi o'zgarganda belgilangan tomonlar nisbatini saqlab qolishini ta'minlaydi, bu esa moslashuvchan va vizual jozibali maket yaratadi.

4. Zaxira qiymatlar va birliklar bilan ishlash

Siz funksiyalardan turli birliklar bilan ishlash yoki ma'lum bir CSS xususiyati qo'llab-quvvatlanmagan taqdirda zaxira qiymatlarni taqdim etish uchun ham foydalanishingiz mumkin. Masalan, shrift o'lchamlari uchun vw birliklaridan foydalanishni xohlashingiz mumkin, lekin vw ni qo'llab-quvvatlamaydigan eski brauzerlar uchun piksel zaxirasini taqdim etishingiz mumkin.

            @function responsive-font-size($viewport-width, $min-font-size, $max-font-size) {
  $calculated-size: calc(#{$min-font-size} + (#{$max-font-size} - #{$min-font-size}) * ((100vw - 320px) / (1200px - 320px)));
  @return clamp($min-font-size, $calculated-size, $max-font-size);
}

h1 {
  font-size: responsive-font-size(100vw, 20px, 40px); // Ekran o'lchamiga qarab 20px va 40px oralig'idagi shrift o'lchami
}

            

              
                Copy
              
            
          

Bu misol shrift o'lchamining belgilangan minimal va maksimal qiymatlar oralig'ida qolishini ta'minlash uchun clamp() funksiyasidan foydalanadi. Agar clamp() qo'llab-quvvatlanmasa, brauzer ko'rish maydoni kengligiga asoslangan moslashuvchan shrift o'lchamini ta'minlaydigan calc() qiymatini ishlatadi.

CSS @function dan foydalanish bo'yicha eng yaxshi amaliyotlar

@function dan foydalanishingiz samarali va qo'llab-quvvatlanadigan bo'lishini ta'minlash uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Tushunarli nomlarni tanlang: Funksiyalaringizga ularning maqsadini aks ettiruvchi aniq va tushunarli nomlar bering. Bu kodingizni tushunish va qo'llab-quvvatlashni osonlashtiradi. Masalan, faqat `calc` o'rniga `calculate-padding` dan foydalaning.
• Funksiyalarni ixcham tuting: Har bir funksiya yagona, aniq belgilangan vazifani bajarishi kerak. Bir nechta mas'uliyatni o'z zimmasiga oladigan haddan tashqari murakkab funksiyalarni yaratishdan saqlaning.
• Parametrlardan oqilona foydalaning: Funksiyalaringizni moslashuvchan va qayta ishlatiladigan qilish uchun parametrlardan foydalaning. Funksiya tanasi ichida qiymatlarni qattiq kodlashdan saqlaning.
• Funksiyalaringizni hujjatlashtiring: Har bir funksiya nima qilishi, qanday parametrlarni qabul qilishi va qanday qiymat qaytarishini tushuntirish uchun izohlar qo'shing. Bu ayniqsa murakkab funksiyalar uchun muhimdir.
• Funksiyalaringizni sinovdan o'tkazing: Funksiyalaringiz turli stsenariylarda kutilgan natijalarni berishiga ishonch hosil qilish uchun ularni sinchkovlik bilan sinovdan o'tkazing. Potentsial muammolarni aniqlash uchun turli xil kirish qiymatlari va chekka holatlardan foydalaning.
• Ishlash samaradorligini hisobga oling: @function kuchli bo'lishi mumkin bo'lsa-da, murakkab hisob-kitoblar ishlash samaradorligiga ta'sir qilishi mumkin. Render vaqtiga ta'sirini minimallashtirish uchun funksiyalaringizni optimallashtiring. Kerakli joylarda keshlash strategiyalaridan foydalaning.
• CSS o'zgaruvchilaridan foydalaning: Funksiya xatti-harakatini boshqarish va funksiyalaringizni oson moslashtirish uchun CSS o'zgaruvchilarini birlashtiring. Bu foydalanuvchilarga CSS funksiya kodini o'zgartirmasdan dizayn jihatlarini o'zgartirish imkonini beradi.
• Birliklarga e'tiborli bo'ling: Funksiyangiz to'g'ri birliklardan foydalanishiga ishonch hosil qiling, aks holda hisob-kitobingiz kutilgandek ishlamasligi mumkin. Har doim qaytariladigan qiymatga birlik qo'shing.

@function va Miksinlar (Sass/Less) taqqoslanishi

Agar siz Sass yoki Less kabi CSS preprotsessorlari bilan tanish bo'lsangiz, @function miksinlar bilan qanday taqqoslanishini qiziqtirishingiz mumkin. Ikkala xususiyat ham kodni qayta ishlatishga yordam bersa-da, ular turli maqsadlarga xizmat qiladi:

• @function: Qiymat qaytaradi. Hisob-kitoblar, o'zgartirishlar va CSS xususiyatlari uchun qiymatlar yaratish uchun ideal.
• Miksinlar: CSS kodi blokini o'z ichiga oladi. Elementga bir qator uslublarni qo'llash uchun ideal.

Buni shunday tasavvur qiling: @function dasturlash tilidagi funksiyaga o'xshaydi, miksin esa makros yoki kod parchasiga o'xshaydi. Belgilangan vazifaga qarab mos vositani tanlang.

Mana farqni ko'rsatadigan misol:

            /* @function (Sass) */
@function double($number) {
  @return $number * 2;
}

.element {
  width: double(10px); // Natija: width: 20px;
}

/* Miksin (Sass) */
@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius; /* Eski Firefox versiyalari uchun */
  -webkit-border-radius: $radius; /* Eski Safari/Chrome versiyalari uchun */
}

.box {
  @include rounded-corners(5px);
}

            

              
                Copy
              
            
          

Bu misolda double() funksiyasi qiymat qaytaradi (ikki barobar oshirilgan son), rounded-corners() miksini esa CSS kodi blokini (border-radius xususiyatlari) o'z ichiga oladi.

CSS o'zgaruvchilari bilan integratsiya

@function ning haqiqiy kuchi CSS o'zgaruvchilari (maxsus xususiyatlar) bilan birlashtirilganda namoyon bo'ladi. CSS o'zgaruvchilari sizga osonlik bilan yangilanadigan va o'zgartiriladigan qayta ishlatiladigan qiymatlarni aniqlash imkonini beradi. Funksiyalaringizda CSS o'zgaruvchilaridan foydalanib, siz yuqori darajada moslashtirilgan va dinamik uslublar jadvallarini yaratishingiz mumkin.

Mana elementlar orasidagi masofani boshqarish uchun @function bilan CSS o'zgaruvchilaridan foydalanish misoli:

            :root {
  --base-spacing: 16px;
}

@function spacing($multiplier) {
  @return var(--base-spacing) * $multiplier;
}

.element {
  margin-bottom: spacing(2); // Natija: margin-bottom: 32px (16px * 2);
}

.another-element {
  margin-top: spacing(0.5); // Natija: margin-top: 8px (16px * 0.5);
}

            

              
                Copy
              
            
          

Bu misolda --base-spacing CSS o'zgaruvchisi asosiy masofa birligini aniqlaydi. spacing() funksiyasi bu asosiy masofani berilgan ko'paytirgichga ko'paytirib, haqiqiy masofa qiymatini hisoblaydi. --base-spacing qiymatini o'zgartirib, funksiyaning o'zini o'zgartirmasdan butun uslublar jadvalingiz bo'ylab masofani osonlikcha sozlashingiz mumkin.

Ilg'or usullar va mulohazalar

Funksiyalar ichida shartli mantiq

CSS to'liq dasturlash tili bo'lmasa-da, turli stsenariylarni boshqarish uchun @function ichida shartli mantiqdan foydalanishingiz mumkin. `@if` (Sass) va `@when` (Less) kabi preprotsessor direktivalari mantiqiy tarmoqlanish uchun ishlatilishi mumkin.

            @function text-color($background) {
  @if (lightness($background) > 50%) {
    @return #000; // Ochiq fonlar uchun qora rang qaytarish
  } @else {
    @return #fff; // To'q fonlar uchun oq rang qaytarish
  }
}

.element {
  background-color: #eee;
  color: text-color(#eee); // Natija: color: #000;
}

            

              
                Copy
              
            
          

Bu funksiya fon rangining yorqinligiga qarab matn rangini dinamik ravishda tanlaydi, bu esa yaxshi kontrast va o'qish qulayligini ta'minlaydi.

Xatoliklarni qayta ishlash va tekshirish

Kutilmagan xatti-harakatlarning oldini olish uchun funksiyalaringizda potentsial xatoliklarni qayta ishlash va kirish qiymatlarini tekshirish juda muhim. CSS'da o'rnatilgan xatoliklarni qayta ishlash mexanizmlari bo'lmasa-da, noto'g'ri kiritishni tekshirish va standart qiymatni qaytarish yoki ogohlantirish xabarini chiqarish uchun shartli mantiqdan foydalanishingiz mumkin.

Misol (Sass):

            @function calculate-padding($size) {
  @if type-of($size) != number {
    @warn "Noto'g'ri padding o'lchami. Iltimos, sonli qiymat kiriting.";
    @return 0px; // Standart qiymat 0px
  }
  @return $size * 2;
}

.element {
  padding: calculate-padding("small"); // Ogohlantirishni ishga tushiradi
}

            

              
                Copy
              
            
          

Nomlar fazosi (Namespaces)

Nomlar ziddiyatidan qochish uchun, ayniqsa katta loyihalarda, funksiyalaringiz uchun nomlar fazosidan foydalanishni ko'rib chiqing. O'zingizning maxsus funksiyalaringizni o'rnatilgan CSS funksiyalari yoki boshqa kutubxonalardagi funksiyalardan ajratib turish uchun prefiks yaratishingiz mumkin. Masalan, barcha funksiyalaringizni `my-` bilan boshlashingiz mumkin (masalan, `my-rem()`, `my-shade()`).

Xulosa

@function qoidasi CSS'ga kuchli qo'shimcha bo'lib, sizga qayta ishlatiladigan, dinamik va qo'llab-quvvatlanadigan uslublar jadvallarini yaratish imkonini beradi. Ushbu xususiyatni o'zlashtirib, siz o'z dizaynlaringiz ustidan yangi darajadagi moslashuvchanlik va nazoratni ochishingiz, ish jarayoningizni yaxshilashingiz va yanada murakkab va jozibali foydalanuvchi tajribalarini yaratishingiz mumkin. Oddiy birlik konvertatsiyalaridan tortib murakkab rang manipulyatsiyalarigacha, @function sizga toza va samaraliroq CSS kodini yozish imkonini beradi. Taqdim etilgan misollar bilan tajriba o'tkazing va keyingi loyihangizda CSS mahoratingizni oshirish va haqiqatan ham moslashuvchan va kengaytiriladigan dizaynlarni yaratish uchun @function imkoniyatlarini o'rganing.